<template>
  <div class="right-card">
    <m-card :width="439" :height="318" title="风险监测">
      <!-- <v-chart ref="vChart" :option="option" :autoresize="true" /> -->
       <div class="fxBox-group">
        <div :class="(index+1)%2===0?'fxBox-group-item fxBox-group-item-right':'fxBox-group-item'" v-for="(item,index) in pageData.fxData" :key="index">
          <div class="itme-title" :style="{background:`url(${item.icon})`}">
            <span class="item-title-text">{{item.title}}</span>
          </div>
          <div class="item-desc-z">
            <span class="item-z-name">{{item.z_name}}</span>
            <span class="item-z-value">{{item.z_value}}</span>
            <span class="item-z-unit">{{item.z_unit}}</span>
          </div>
          <div class="item-desc-f">
            <span class="item-z-name">{{item.f_name}}</span>
            <span class="item-z-value">{{item.f_value}}</span>
            <span class="item-z-unit">{{item.f_unit}}</span>
          </div>
          
        </div>
        <div class="dunpai">
          <img :src="dunpaiIcon"/>
        </div>
        <div class="pos_group">
          <div class="pos_circleBg"></div>
          <div class="circle pos_circle1"></div>
          <div class="circle pos_circle2"></div>
          <div class="circle pos_circle3"></div>
          <div class="pos_lineBox"></div>

        </div>
        
       </div>
    </m-card>
  </div>
</template>
<script setup>
import { ref, reactive,onMounted, onBeforeUnmount, nextTick } from "vue"
import * as echarts from "echarts"
import mCard from "@/components/mCard/index.vue"
import VChart from "vue-echarts"
import htjcIcon from "@/assets/images/map/htjc_icon.png"
import ssjcIcon from "@/assets/images/map/ssjc_icon.png"
import sjwtIcon from '@/assets/images/map/sjwt_icon.png'
import gjzbIcon from '@/assets/images/map/gjzb_icon.png'
import dunpaiIcon from '@/assets/images/map/dunpai.png'
const pageData = reactive({
  fxData:[
    {
      icon:htjcIcon,
      title:"合同监测",
      z_name:"进行中的合同",
      z_value:58,
      z_unit:"份",
      f_name:"异常合同",
      f_value:10,
      f_unit:"份",
    },
    {
      icon:ssjcIcon,
      title:"诉讼监测",
      z_name:"进行中(原告)",
      z_value:25,
      z_unit:"次",
      f_name:"进行中(被告)",
      f_value:116,
      f_unit:"份",
    },
    {
      icon:sjwtIcon,
      title:"审计问题整改",
      z_name:"已整改",
      z_value:58,
      z_unit:"个",
      f_name:"未整改",
      f_value:10,
      f_unit:"个",
    },
    {
      icon:gjzbIcon,
      title:"财务关键指标",
      z_name:"资产负债率",
      z_value:28.25,
      z_unit:"%",
      f_name:"流动比率",
      f_value:16.37,
      f_unit:"%",
    }
  ]
})
const option = ref({
  grid: {
    left: "5%",
    top: "10%",
    width: "90%",
    height: "86%",
  },
  legend: {
    top: "8%",
    icon: "circle",
    itemWidth: 8,
    itemHeight: 8,
    textStyle: {
      color: "#90979c",
      fontSize: 12,
      lineHeight: 20,
    },
  },

  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      shadowStyle: { opacity: 0.2 },
    },
    backgroundColor: "rgba(0,0,0,1)",
    borderWidth: 1,
    borderColor: "#999999",
    textStyle: {
      color: "#ffffff",
      fontSize: 10,
      lineHeight: 156,
    },
  },
  color: ["#6BC7F6", "#44E6A2"],
  xAxis: [
    {
      type: "value",
      interval: 0,

      axisLine: {
        show: false,
        lineStyle: {
          color: "#407A80",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#CFDAE6",
        fontSize: 10,
        interval: 0,
      },
    },
  ],

  yAxis: [
    {
      type: "category",
      inverse: true,
      axisLabel: {
        color: "#CFDAE6",
        fontSize: 10,
        interval: 0,
        show: false,
        verticalAlign: "top",
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      data: ["扶贫资金", "医疗卫生", "渔业资金", "社区改造"],
    },
    {
      inverse: true,
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(0,0,0,0)",
        },
      },
      data: [],
    },
  ],
  color: ["rgba(115,208,255,1)", "rgba(77, 255, 181, 1)", "rgba(230, 230, 230, 1)", "rgba(255, 200, 89, 1)"],
  series: [
    {
      data: [
        {
          value: 100,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(3,65,128,1)" },
              { offset: 1, color: "rgba(115,208,255,1)" },
            ]),
          },
        },
        {
          value: 80,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(11, 77, 44, 1)" },
              { offset: 1, color: "rgba(77, 255, 181, 1)" },
            ]),
          },
        },
        {
          value: 60,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(117, 117, 117, 1)" },
              { offset: 1, color: "rgba(230, 230, 230, 1)" },
            ]),
          },
        },
        {
          value: 50,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "rgba(153, 105, 38, 1)" },
              { offset: 1, color: "rgba(255, 200, 89, 1)" },
            ]),
          },
        },
      ],
      type: "bar",
      barWidth: 7,
      yAxisIndex: 0,
      showBackground: false,
      z: 2,
      label: {
        show: true,
        position: "middle",
        padding: [-18, 0, 0, 0],
        color: "#16C1A6",
        fontSize: 12,
        formatter:
          "{title|{b}}                                                                              {value|{c}}  {unit|万元}",
        rich: {
          title: {
            color: "#FFFFFF",
            fontSize: 10,
          },
          value: {
            fontSize: 10,
          },
          unit: {
            color: "#717477",
            fontSize: 10,
          },
        },
      },
      itemStyle: {
        borderRadius: 0,
        borderWidth: 2,
        borderColor: "rgba(26, 57, 77,1)",
      },
    },
    {
      name: "背景",
      type: "bar",
      yAxisIndex: 1,
      barGap: "-100%",
      data: [120, 120, 120, 120],
      barWidth: 10,
      z: 0,
      itemStyle: {
        color: "none",
        borderColor: "rgba(172,191,188,0.4)",
        borderWidth: 1,
        borderRadius: 0,
      },
    },
  ],
})

</script>

<style lang="scss">
.fxBox-group{
  padding: 17px 24px 4px;
  display: flex;
  flex-wrap: wrap;
  width: 439px;
  height: 270px;
  box-sizing: border-box;
  
  position:relative;

  .fxBox-group-item{
    width: 50%;
    height: 130px;
    .itme-title{
      width: 143px;
      height: 32px;
      line-height: 32px;
      background-size: 100% 100%;
      font-weight: 500;
      font-size: 14px;
      color: #FFFFFF;
      text-align: left;
      .item-title-text{
        padding-left: 36px;
      }
      
    }
    .item-desc-z{
      margin-top:8px;

    }
    .item-desc-f{
      margin-top: 8px;
    }
    .item-z-name{
      font-weight: 400;
      font-size: 12px;
      color: #D2E6FF;
      line-height: 17px;
    }
    .item-z-value{
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 22px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .item-z-unit{
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 17px;
      opacity: 0.5;
    }
  }
  .fxBox-group-item-right{
    text-align: right;
    .itme-title{
        margin-left: calc(100% - 143px);
        .item-title-text{
          padding-left: 0;
          padding-right: 36px;
        }
      }
    
  }
}
.fxBox-group::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient( 180deg, #092148 0%, rgba(8,58,123,0.68) 100%);
  opacity: 0.2;
  z-index: -1;
}
.dunpai{
  width: 42px;
  height: 48px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 4;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-iteration-count: infinite ;
  img{
    width: 100%;
    height: 100%;
  }
}
.pos_circleBg{
  width: 64.78px;
  height: 64.78px;
  background: radial-gradient( 50% 50% at 50% 50%, rgba(23,89,155,0.47) 0%, rgba(4,27,63,0.67) 100%);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 0;
}
.pos_circle1{
  width: 67.78px;
  height: 67.78px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1px solid #204E97;
  z-index: 1;
}
.pos_circle2{
  width: 92.63px;
  height: 92.63px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 2px solid #204E97;
  opacity: 0.6;
  z-index: 2;
}
.pos_circle3{
  width: 122px;
  height: 122px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 2px solid #204E97;
  opacity: 0.6;
  z-index: 3;
}
.pos_lineBox{
  width: 391px;
  height: 261px;
  position: absolute;
  background: url("../../../assets/images/map/jian_icon.png") no-repeat;
  background-size: 100% 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin-left: 5px;
  z-index: 0;
}
.circle {
  opacity: 0;
}
/* 定义循环动画关键帧 */
@keyframes fadeIn {
  0% {
    opacity: 0.4;
  }
  
  100% {
    opacity: 1;
  }
}
/* 定义循环动画关键帧 */
@keyframes sequence {
  0% {
    opacity: 0;
  }
  15%, 35% { /* 显示时间段（1秒） */
    opacity: 1;
  }
  50% {
    opacity: 0;

  }
  100% {
    opacity: 0;
  }
}

/* 应用动画（总周期 6 秒） */
.circle:nth-child(3) {
  animation: sequence 3s infinite;
}
.circle:nth-child(2) {
  animation: sequence 3s infinite -1s; /* 延迟 2 秒 */
}
.circle:nth-child(1) {
  animation: sequence 3s infinite -2s; /* 延迟 4 秒 */
}
</style>
